扁平化設計理論篇

扁平化

又稱瑞士風格(Swiss Style)
有瑞士風格的字體：Grotesque 無襯線字體

Helvetica Font

這是 Grotesque 裡最常被使用的

● 平面設計推薦字體

● 無襯線字體

● 旁系 -> Microsoft Arial Font

● one of Mac OS 11 fonts

● Helvetica Neue Ultra Light 有銳利清晰與時尚感


中文字體

中文線條錯綜複雜，扁平設計會顯得突兀
目前尚未研發出中文字的扁平設計字體，但中文字本身就是如「一幅畫」的存在，因此著重「空間布局」、「黑白平衡」即可。

扁平化特徵

  • 移除 3D 要素

    1. 陰影
    2. 漸層
    3. 裝飾
    4. 紋理
    5. 反射光澤

    等…

  • 專注於

    1. 圖像元素
    2. 排版
    3. 純色

  • 畫面更為流線型

扁平與擬物

  • 扁平設計 1.0 :
    • 著名指標(Microsoft Zune)
    • 色塊單純
    • 容易延伸拓展區域
    • 簡單的排版(simple typography)
    • 極簡主義
    • 平面物件
    • 載入速度快
  • 擬物設計 (Skeuomorphism):
    • 著名指標(MacOS Big Sur)
    • 漸層、陰影等延伸畫面時容易扭曲
    • real-world 物件
    • 載入速度相對慢
  • 扁平設計 2.0 :
    • 類名: Material Design
    • 在扁平上加入「少許」3D 元素
    • 加上柔順的陰影
    • 加上模糊(圖中前面的聖誕樹)

扁平化需注意

因為扁平化對於「數位互動經驗」較少的使用者而言相對不直觀，因此要有以下方法去作為「潛意識引導」。
讓使用者容易發現…

  • 按鈕
    • 利用圖標表示「這是可以點」的
  • 連結
  • 可輸入框

CTA

  • Call To Action (行動呼籲設計)
  • 呈現方式: 圖、按鈕、文字…
  • 簡述: 提示 user 點擊進行下一步流程
  • 有正向價值的按鈕都是 CTA
  • 頁面中存在多個按鈕時，CTA 優先級最高

根據 B.J. Fogg 的「福格行為模型」

$B=MAT$

  • B 行為 (Behavior)
  • M 動機 (Motivation)
  • A 能力 (Ability)
  • T 觸發 (Trigger)
  • 其中 MA 成反比
    • 想買，一定會去找按鈕訂購
    • 動機普通，但容易看到訂購鍵

因此，按鈕的位置十分重要，也對應 2 種典型的方法論，「古騰堡原則」、「菲茨定律」

  1. 古騰堡原則
    • 左上角: user 首先注意到的地方
    • 右下角: 視覺流的終點
    • 右上角: 「較」少被注意
    • 左下角: 「最」少被注意
    • 從左上到右到左下的 Z 字型動線掃視
  2. 菲茨定律
    • 任一點移動到目標所需時間與能力，與點到目標的距離和大小有關
    • $T=a+b \cdot log{_2}(\dfrac{D}{W}+1)$
    • T: 移動時長
    • a、b: 經驗常數
    • D: 起始與終點距離
    • W: 目標寬度大小

值得注意的是

  • 古騰堡原則

    • 右上通常為「普通功能操作」或「敏感性操作」
      • 敏感性操作
    • 底部按鈕分析
      • 水平並排，CTA 高放右邊(e.g. 取消 確認)
        • 好的反面應用: 避免潛意識或專注其他適的情況下點錯「重要或敏感的行為」，將該消極的行為放置左側。利用「視覺回流」去加以確認該行動
      • 垂直多按鈕，確認放上面，取消放下面
        • 因眼睛路徑而論，上到下瀏覽效率最高，所以利用「視覺回流」與「背景色顯著」可達到防錯。

  • 菲茨定律

    • D 小、W 大、按鈕放邊或角(因畫面游標會卡住因此用戶所需能力小)

好的 CTA 按鈕概念

  1. 按鈕看起來是潛意識可被點擊的
    • 邊角圓滑
    • 陰影 (Flat Design 1.0 不大適用)
    • 顏色突出
    • 大小合適
      • Apple: CTA button at least 44X44 pixel
      • MicroShop: CTA button at least 34X26 pixel
      • 詳細可以參考這裡
  2. 用對比色
  3. 留白
    • 可以為 CTA 高的創造點擊率(CTR)
    • 留白區域越少，表示按鈕間連結相近
    • 用簡短的話「鼓勵他」或「引導他」點進，e.g. …`開始使用’
  4. 第一人稱
    • 點擊獲取你的... :x:
    • 點擊獲取我的... :heavy_check_mark: (提高 90% 點擊率)
  5. 動詞設計

Reference